<template name="service">
	<view>
		<view class="cu-custom fixed" :style="[{height:CustomBar + 'px'}]" style="background-color: #0081FF;z-index: 99999;">
			<view class="cu-bar fixed" :style="style" style="z-index: 999999;">
				<view class="content" :style="[{top:StatusBar + 'px'}]" style="color: #FFFFFF;">
					服务
				</view>
				<view class="left-top">
				</view>
				<view class="right absoult" @click="goMessage">
					<image style="width:40rpx;height:40rpx;" src="../../static/u67.png" mode=""></image>
					<view class="inner" v-if="message>0">
						{{message}}
					</view>
				</view>
			</view>
		</view>
		<!-- tab -->
		<view class="tab">
			<view class="tab-item" @click="changTopTab(index,item,'voice')" :class="{'text-orange':tabindex==index,'text-line':index!=3}"
			 v-for="(item,index) in tab" :key="index">
				{{item}}
				<!-- seveice -->
				<view class="tab-right" v-if="index==1&&seveice.hasCurTimeService==true">
				</view>
				<view class="tab-right" v-if="index==2&&seveice.hasTodayService==true">
				</view>
				<view class="tab-right" v-if="index==3&&seveice.hasCurWeekService==true">
				</view>
			</view>
		</view>
		<template v-if="tabindex==0">
				<scroll-view v-if="isHave" scroll-y="true" :style="height"  class="scroll_instant">
					<view class="instant">
						<view class="instant-item" style="display: flex;justify-content: center;align-items: center;" @click="goDetail(item)"
						 v-for="(item,index) in serviceItemList" :key="index">
							<view class="instant-item-inner" style="" v-if="item.serviceItemIcon.mode=='local'||item.serviceItemIcon.mode=='sysIcon'">
								<image :src="item.serviceItemIcon.picUrl" mode=""></image>
								<view style="text-align: center;">{{item.serviceItemName}}</view>
							</view>
							<view style="border-radius: 24rpx;overflow: hidden;" v-if="item.serviceItemIcon.mode== 'diy'">
								<view class="instant-item-inner-diy" style="font-size: 40rpx;color: #333333;" :style="{color:item.serviceItemIcon.fontColor,background:item.serviceItemIcon.bacColor}">
									{{item.serviceItemIcon.word}}
								</view>
								<view style="text-align: center;">{{item.serviceItemName}}</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view v-if="!isHave" class="no-data">
				暂无数据
				</view>
		</template>
		<template v-if="tabindex==1||tabindex==2||tabindex==3">
			<view class="current">
				<!-- top -->
				<view class="current-top" v-if="tabindex==1">
					<!-- curTime[0]-curTime[1] -->	
					<view class="current-img" @click="readTime(tabindex)">
						<view class="current-img-inner">
							<image style="width:44rpx;height:44rpx;" :src="imgUrl" mode=""></image>
							<text class="title">
								<text>{{startTime}}</text>
								<text>-</text>
								<text>{{endTime}}</text>
							</text>
						</view>
					</view>
					<view class="current-right" @click="changeImg(showTitle)">
						<image src="../../static/u3825.png" mode=""></image>
						<view class="current-inner">{{showTitle}}</view>
					</view>
				</view>
				<view class="current-top" v-if="tabindex==2">
					<view class="current-img" @click="readTime(tabindex)">
						<view class="current-img-inner">
							<image style="width:44rpx;height:44rpx;" :src="imgUrl" mode=""></image>
							<text class="title">
								<text>{{weekDay}}</text>
							</text>
						</view>
					</view>
					<!-- curTime[0]-curTime[1] -->
					<view class="current-img">
					</view>
					<view class="current-right" @click="changeImg(showTitle)">
						<image src="../../static/u3825.png" mode=""></image>
						<view class="current-inner">{{showTitle}}</view>
					</view>
				</view>
				<view class="current-top" v-if="tabindex==3">
					<!-- curTime[0]-curTime[1] -->
					<view class="current-img" @click="readTime(tabindex)">
						<view class="current-img-inner">
							<image style="width:44rpx;height:44rpx;" :src="imgUrl" mode=""></image>
							<text class="title">
								<text>{{startYueTime}}号</text>
								<text>-</text>
								<text>{{endYueTime}}号</text>
							</text>
						</view>
					</view>
					<view class="current-right" @click="changeImg(showTitle)">
						<image src="../../static/u3825.png" mode=""></image>
						<view class="current-inner">{{showTitle}}</view>
					</view>
				</view>


				<!-- 服务项目 -->
				<view v-if="!object">
					<view class="tab-xian">
						<view class="inner"> </view>
					</view>
					<view class="current-bot">
						<scroll-view v-if="isHave" :style="heights" scroll-y="true" class="current-bot-inner">
							<view class="current-bot">
							<view class="current-item" v-if="isHave" @click="gotoDetal('ditem',item,tabindex)" v-for="(item,index) in customItemList"
							 :key="index">
								<view v-if="item.serviceItemIcon.mode=='local'||item.serviceItemIcon.mode=='sysIcon'">
									<view class="current-item-img instant-item-inner">
										<image :src="item.serviceItemIcon.picUrl" mode="" style="margin-bottom: 12rpx;"></image>
										<view class="current-item-position">
											{{item.needServiceNum}}
										</view>
									</view>
									<view class="current-item-content" style="text-align: center;">
										{{item.serviceItemName}}
									</view>
								</view>
								<view v-if="item.serviceItemIcon.mode== 'diy'">
									<view class="instant-item-inner-diy current-item-position-diy-img" style="font-size: 40rpx;color: #333333;"
									 :style="{color:item.serviceItemIcon.fontColor,background:item.serviceItemIcon.bacColor}">
										{{item.serviceItemIcon.word}}
										<view class="current-item-position current-item-position-diy">
											{{item.needServiceNum}}
										</view>
									</view>
									<view style="text-align: center;">{{item.serviceItemName}}</view>
								</view>
							</view>
							</view>
						</scroll-view>
						<view v-if="!isHave" class="no-data" style="width: 100%;">
							暂无数据
						</view>
					</view>
				</view>
				<!-- 服务对象 -->
				<view v-if="object">
					<view class="tab-xian">
						<view class="inner"> </view>
					</view>
					<view style="display: flex;height: auto;" v-if="isHave">
						<view class="scroll">
							<scroll-view scroll-y="true" :style="heights">
								<view :class="{'changeColor':leftTab==index}" @click="changeTab(index,item)" class="scroll_inner" v-for="(item,index) in leftRoomList"
								 :key="index">
									<view>{{item.name}}</view>
								</view>
							</scroll-view>
						</view>
						<scroll-view scroll-y="true" :style="heights" class="scroll_rig_outer">
							<view class="scroll_rig" v-if="serviceTarget==0">
								<view class="scroll_rig_inner" v-for="(item,index) in rightListItem" :key="index" @click="gotoDetal('dzero',item)">
									<view class="person_img">
										<image src="../../static/img/basics/u129.png" mode=""></image>
									</view>
									<view class="person_rig">
										<view class="person_tp">
											<view class="person_tp_tp">
												<view class="person_left">
													{{item.bedName}}
												</view>
												<view class="person_right">
													{{item.needServiceNum}}
												</view>
											</view>
											<view class="person_bt">
												<view>{{item.oldManName}}</view>
												<view class='cu-tag round bg-orange'>{{item.abilityLevel}}</view>
												<view class='cu-tag round bg-blue' v-if="item.outStatus==0">外出</view>
											</view>
										</view>
										<view class="person_icon">
											<text class="lg text-gray cuIcon-right"></text>
										</view>
									</view>
								</view>
							</view>
							<view class="scroll_rig" v-if="serviceTarget==1">
								<scroll-view scroll-y="true">
									<view v-for="(item,index) in rightListItem" :key="index" class="scroll_rig_inner" @click="gotoDetal('done',item)">
										<view class="person_img">
											<image src="../../static/img/basics/u609.png" mode=""></image>
										</view>
										<view class="person_rig">
											<view class="person_tp">
												<view>
													{{item.roomName}}
												</view>
												<view class="person_bt" style="flex-direction: column;">
													<view>
														<text class="right">昨日累计:</text>
														<text>{{item.yesterdayCheckCount}}次</text>
													</view>
													<view>
														<text class="right">本月累计:</text>
														<text>{{item.curMonthCheckCount}}次</text>
													</view>
												</view>
											</view>
											<view class="person_icon">
												<text class="lg text-gray cuIcon-right"></text>
											</view>
										</view>
									</view>
								</scroll-view>
							</view>
							<!-- 区域 -->
							<view class="right-list-item-outer" v-if="serviceTarget==2">
								<view class="right-list-item" v-for="(item,indexs) in rightListItem" :key="indexs" @click="gotoDetal('dtwo',item)">
									<view class="left">
										{{item.name}}
									</view>
									<view class="center">
										<view>{{item.needServiceNum}}</view>
									</view>
									<view class="right lg text-gray cuIcon-right">
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="no-data" v-if="!isHave">
						暂无数据
					</view>

				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		name: "service",
		data() {
			return {
				imgUrl: '../../static/u3764.png',//顶部的图片
				serviceTarget: -1, //服务类型
				showTitle: '服务对象', //展示的数据的
				//左侧切换
				leftTab: 0, //左侧的时间的tab
				object: false,//是否是对象
				tabindex: 0, //顶部tab
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				tab: ['即时服务','当前服务','今日服务','本月服务'], //顶部tab
				serviceItemList: [], //即时服务List
				startTime: '', //当前服务开始时间
				endTime: '',//当前服结束时间
				startYueTime: "",//本月服务开始时间
				endYueTime: "",//本月服务结束时间
				curTime: [], //当前服务的时间的数组
				seveice: {},//顶部是否有数据的对象
				customItemList: [], //当时今日本周
				serviceCycle: 0, //服务的类型，0老人，1房间 2,区域
				leftRoomList: [], //服务对象左侧列表
				bottomNull: false, //底部tab项目是否为空
				rightListItem: [], //服务列表右侧,
				message: '', //信息
				isHave: true, //是否有数据
				weekDay: '',//周日期
				monthDayRange: [] ,//处于本月的日期
				
			}
		},
		onHide() {
			// console.log(this.object)
		},
		computed: {
			style() {
				var StatusBar = this.StatusBar;
				var CustomBar = this.CustomBar;
				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				return style
			},
			height(){
				var CustomBar = this.CustomBar;
				var screenHeight= this.screenHeight;
				var hei = screenHeight - CustomBar-80
				 console.log(hei,9999)
				var height = `height:${hei}px;`;
				return height
			},
			heights(){
				var CustomBar = this.CustomBar;
				var screenHeight= this.screenHeight;
				var hei = screenHeight - CustomBar-150
				var heights = `height:${hei}px;`;
				return heights
			},
		},
		onHide() {
			// 移除监听事件
			uni.$off("NFC_READ");
		},
		onTabItemTap(){
			if (this.$store.state.state && this.$store.state.isphone) {
				getApp().globalData.TTSSpeaker.stop();
				getApp().globalData.TTSSpeaker.speak(`服务`,1);
			}
			this.getImmediateServiceItem();
			var _that =  this
			this.changTopTab(_that.tabindex)
			if(this.leftRoomList[this.leftTab]){
				 this.changeTab(this.leftTab,this.leftRoomList[this.leftTab])
			}
		},
		onReady() {
		},
		onShow() {
			if(this.leftRoomList[this.leftTab]){
				 this.changeTab(this.leftTab,this.leftRoomList[this.leftTab])
			}
			this.getTopNum();
			this.getHasReadMessageFlag();
			this.getImmediateServiceItem();
			const that = this;
			uni.$on("NFC_READ", function(msg) {
				that.readCard(msg.rfid);
			});
			 console.log(this.leftTab,this.leftRoomList[this.leftTab],9999)
			this.object = uni.getStorageSync('object')
			if (this.serviceCycle) {
				if (this.object) {
					this.showchangeImg('服务项目')
				} else {
					this.showchangeImg('服务对象')
				}
			}
		},
		onLoad() {
			
		},
		onUnload() {
			
		},
		methods: {
			readName(name){
					  if(this.$store.state.state&&this.$store.state.isphone){
					  	getApp().globalData.TTSSpeaker.stop();
					  	getApp().globalData.TTSSpeaker.speak(name,1);
					  }	
			},
			readCard(id) {
				console.log(9999)
				this.$http('/implement-service/implement/getByRfidCardIdForService', 'get', {
					rfidCardId: id
				}).then(res => {
					console.log(res, 9999)
					if (res.data.code == 200) {
						const data = res.data.data;
						console.log(data)
						if (data == undefined) {
			
						}
						if (data.serviceTarget == 0) {
							let param = {
								id: data.serviceObject.id
							}
							this.$http('/care-service/oldBaseDetail/getOldBaseInfo', 'get', param).then(res => {
								 console.log(res,'resresresres')
								if (!res.data.data.outStatus) {
									if (this.$store.state.state && this.$store.state.isphone) {
										getApp().globalData.TTSSpeaker.stop();
										getApp().globalData.TTSSpeaker.speak('长者已经外出', 1);
									}
									uni.showToast({
										title:'长者已经外出',
										icon:'none'
									})
								} else {
									if (this.$store.state.state && this.$store.state.isphone) {
										getApp().globalData.TTSSpeaker.stop();
										getApp().globalData.TTSSpeaker.speak('进入芯片对应长者详情页面', 1);
									}
									uni.navigateTo({
										url: '/pages/basics/services/detail?oldBaseId=' + res.data.data.oldBaseId
									})
								}
							});
						}
						if (data.serviceTarget == 1) {
							if (this.$store.state.state && this.$store.state.isphone) {
								getApp().globalData.TTSSpeaker.stop();
								getApp().globalData.TTSSpeaker.speak('进入芯片对应房间详情页面', 1);
							}
							uni.navigateTo({
								url: '/pages/basics/daily/detail?roomName=' + data.serviceObject.name + '&roomId=' + data.serviceObject.id
							})
						}
						if (data.serviceTarget == 2) {
							if (this.$store.state.state && this.$store.state.isphone) {
								getApp().globalData.TTSSpeaker.stop();
								getApp().globalData.TTSSpeaker.speak('进入芯片对应服务点详情页面', 1);
							}
							uni.navigateTo({
								url: '/pages/basics/regional/detail?id=' + data.serviceObject.id
							})
						}
					} else if (res.data.code == 2000) {
						if (this.$store.state.state && this.$store.state.isphone) {
							getApp().globalData.TTSSpeaker.stop();
							getApp().globalData.TTSSpeaker.speak(res.data.message, 1);
						}
					}
				})
			},
			//；消息goMessage#/pages/my/message-center/message-center
			goMessage(){
				if(this.$store.state.state&&this.$store.state.isphone){
					getApp().globalData.TTSSpeaker.stop();
					getApp().globalData.TTSSpeaker.speak(`消息中心`,1);
				}		
				uni.navigateTo({
					url:'/pages/my/message-center/message-center'
				})
			},
			readTime(tabindex){
				switch(tabindex){
					case 1:
						if(this.$store.state.state&&this.$store.state.isphone){
							getApp().globalData.TTSSpeaker.stop();
							getApp().globalData.TTSSpeaker.speak('您好，以下为'+this.endTime+'前需完成的服务项目',1);
						}	
					break;
					case 2:
						if(this.$store.state.state&&this.$store.state.isphone){
							getApp().globalData.TTSSpeaker.stop(); 
							getApp().globalData.TTSSpeaker.speak('您好，以下为'+this.weekDay+'前需完成的服务项目',1);
						}	
					break;
					case 3:
						if(this.$store.state.state&&this.$store.state.isphone){
							getApp().globalData.TTSSpeaker.stop();
							getApp().globalData.TTSSpeaker.speak('您好，以下为'+this.endYueTime+'号前需完成的服务项目',1);
						}	
					break;
				}
			},
			// GET /service/getCurMonthDayRange
			// 获取当前时间段
			getCurMonthDayRange() {
				this.$http('/care-service/service/getCurMonthDayRange', 'get').then(res => {
					if (res.data.code == 200) {
						// weekDay\
						this.startYueTime = res.data.data[0]
						this.endYueTime = res.data.data[1]
					}
				});
			},
			// GET /service/getCurWeekDay 获取当前是周几
			getCurWeekDay() {
				this.$http('/care-service/service/getCurWeekDay', 'get').then(res => {
					if (res.data.code == 200) {
						// weekDay\
						this.weekDay = res.data.data
					}
				});
			},
			// 顶部是否有消息
			getHasReadMessageFlag() {
				let param = {}
				param.teamId = uni.getStorageSync('teamId')
				this.$http('/care-service/myMessage/getHasReadMessageFlag', 'get', param).then(res => {
					if (res.data.code == 200) {
						this.message = res.data.data
					}
				});
			},
			// 获取是否有待服务项目
			// GET /service/getTopNum
			getTopNum() {
				let param = {}
				param.teamId = uni.getStorageSync('teamId')
				this.$http('/care-service/service/getTopNum', 'get', param).then(res => {
					if (res.data.code == 200) {
						this.seveice = res.data.data
					}
				});
			},

			//及时服务
			getImmediateServiceItem() {
				this.$http('/care-service/service/getImmediateServiceItem', 'get').then(res => {
					if (res.data.code == 200) {
						let serviceItem = res.data.data;
						if (serviceItem.length == 0) {
							this.isHave = false
						} else {
							this.isHave = true
						}
						for (let item of serviceItem) {
							item.serviceItemIcon = JSON.parse(item.serviceItemIcon)
						}
						this.serviceItemList = serviceItem;
					}
				});
			},
			// 对象详情
			gotoDetal(title,item,tabindex) {
				 console.log(item)
				let datas = JSON.stringify(item);
				switch (title) {
					case 'ditem':
							if(this.$store.state.state&&this.$store.state.isphone){
								getApp().globalData.TTSSpeaker.stop();
								getApp().globalData.TTSSpeaker.speak(item.serviceItemName,1);
							}
						uni.setStorageSync('object', this.object)
						if (item.serviceTarget == '1') {
							uni.navigateTo({
								url: '/pages/service/current/room?item=' + datas + '&serviceCycle=' + this.serviceCycle
							})
						} else {
							uni.navigateTo({
								url: '/pages/service/current/card?item=' + datas + '&serviceCycle=' + this.serviceCycle
							})
						}
						break
					case 'done':
						if(this.$store.state.state&&this.$store.state.isphone){
							getApp().globalData.TTSSpeaker.stop();
							getApp().globalData.TTSSpeaker.speak('房间'+item.roomName,1);
						}	
						uni.setStorageSync('object', this.object)
						uni.navigateTo({
							url: '/pages/basics/daily/registration?roomName=' + item.roomName + '&roomId=' + item.id
						})
						break
					case 'dzero':
						//所有的长者的dqtwoqq
						uni.setStorageSync('object', this.object)
						if (item.outStatus == '0') {
							if(this.$store.state.state&&this.$store.state.isphone){
								getApp().globalData.TTSSpeaker.stop();
								getApp().globalData.TTSSpeaker.speak(item.oldManName+'目前已外出',1);
							}
							// 
						} else {
							if(this.$store.state.state&&this.$store.state.isphone){
								getApp().globalData.TTSSpeaker.stop();
								getApp().globalData.TTSSpeaker.speak(item.oldManName+'目前正常在院内',1);
							}
							uni.setStorageSync('object', this.object)
							uni.navigateTo({
								url: './current/detail?item=' + datas + '&serviceCycle=' + this.serviceCycle
							})
						}
						break
					case 'dtwo':
						uni.setStorageSync('object', this.object)
						if(this.$store.state.state&&this.$store.state.isphone){
							getApp().globalData.TTSSpeaker.stop();
							getApp().globalData.TTSSpeaker.speak(item.name,1);
						}
						uni.navigateTo({
							url: '/pages/service/area/detail?item=' + datas + '&serviceCycle=' + this.serviceCycle
						})
						break
				}

			},
			// GET /service/getCurTime
			changeTab(index, item) {
				console.log(index, item)
				this.rightListItem = []
				if(this.$store.state.state&&this.$store.state.isphone){
					getApp().globalData.TTSSpeaker.stop();
					getApp().globalData.TTSSpeaker.speak(item.name,1);
				}
				this.leftTab = index;
				this.serviceTarget = item.serviceTarget
				this.getObjectRightListByServiceItem(item.id);
			},
			// 获取当前时间
			getCurTime() {
				this.$http('/care-service/service/getCurTime', 'get').then(res => {
					if (res.data.code == 200) {
						this.curTime = res.data.data;
						this.startTime = this.curTime[0]
						this.endTime = this.curTime[1]
					}
				});
			},
			// showchangeImg 展示
			showchangeImg(showTitle) {
				switch (showTitle) {
					case '服务项目':
						this.showTitle = '服务项目'
						this.getListByServiceItem(this.serviceCycle);
						break;
					case '服务对象':
						this.showTitle = '服务对象'
						this.getObjectLeftListByServiceItem();
						break;
				}

			},

			// 切换图片
			changeImg(showTitle) {
				switch (this.showTitle) {
					case '服务对象':
						this.object = false;
						if(this.$store.state.state&&this.$store.state.isphone){
							getApp().globalData.TTSSpeaker.stop();
							getApp().globalData.TTSSpeaker.speak('服务对象',1);
						}
						this.showTitle = '服务项目'
						this.getObjectLeftListByServiceItem();
						break;
					case '服务项目':
						this.object = true;
						if(this.$store.state.state&&this.$store.state.isphone){
							getApp().globalData.TTSSpeaker.stop();
							getApp().globalData.TTSSpeaker.speak('服务项目',1);
						}
						this.showTitle = '服务对象'
						this.getListByServiceItem(this.serviceCycle);
						break;
				}
			},
			// 获取待服务对象左侧列表(传serviceCycle,teamId,'serviceItemId')
			//GET /service/getObjectLeftListByServiceItem			
			getObjectLeftListByServiceItem() {
				this.leftRoomList = []
				this.rightListItem = []
				let param = {}
				param.teamId = uni.getStorageSync('teamId')
				param.serviceCycle = this.serviceCycle
				this.$http('/care-service/service/getObjectLeftListByServiceItem', 'get', param).then(res => {
					if (res.data.code == 200) {
						this.leftRoomList = res.data.data;
						this.isHave = true
						if (res.data.data.length == 0) {
							this.isHave = false
						} else {
							this.isHave = true
							this.getObjectRightListByServiceItem(this.leftRoomList[0].id)
							this.serviceTarget = this.leftRoomList[0].serviceTarget;
						}
					}
				});

			},
			// GET /service/getObjectRightListByServiceItem
			// 获取待服务对象右侧列表(传serviceCycle,teamId,'serviceItemId',preId)
			getObjectRightListByServiceItem(preId) {
				let param = {}
				param.serviceCycle = this.serviceCycle
				param.teamId = uni.getStorageSync('teamId')
				param.preId = preId
				this.$http('/care-service/service/getObjectRightListByServiceItem', 'get', param).then(res => {
					if (res.data.code == 200) {
						this.isHave = true
						if (res.data.data.length == 0) {
							this.isHave = false
						} else {
							this.isHave = true
							this.rightListItem = res.data.data;
						}
					}
				});
			},
			// 切换顶部tab
			changTopTab(index, item,voice) {
				if(voice!=undefined){
					if(this.$store.state.state&&this.$store.state.isphone){
						getApp().globalData.TTSSpeaker.stop();
						getApp().globalData.TTSSpeaker.speak(item,1);
					}
				}
				this.tabindex = index;
				this.serviceCycle = index;
				// this.leftTab = 0;
				switch (index) {
					case 0:
						this.getImmediateServiceItem();
						break;
					case 1:
						console.log(index)
						this.object = false
						this.showTitle = '服务项目'
						this.getCurTime();
						this.getListByServiceItem(this.serviceCycle)
						break;
					case 2:
						this.getCurWeekDay()
						this.showTitle = '服务项目'
						this.object = false
						this.showTitle = '服务项目'
						this.getListByServiceItem(this.serviceCycle)
						break;
					case 3:
						this.getCurMonthDayRange()
						this.object = false
						this.getListByServiceItem(this.serviceCycle)
						break;
				}
			},
			// GET /service/getListByServiceItem
			getListByServiceItem(index) {
				let param = {}
				param.teamId = uni.getStorageSync('teamId')
				param.serviceCycle = index
				this.$http('/care-service/service/getListByServiceItem', 'get', param).then(res => {
					if (res.data.code == 200) {
						this.customItemList = []
						const data = res.data.data;
						for (let item of data) {
							item.serviceItemIcon = JSON.parse(item.serviceItemIcon)
						}
						this.customItemList = data;
						this.isHave = true
						if (this.customItemList.length) {
							this.isHave = true
						} else {
							this.isHave = false
						}
					}
				});
			},
			goDetail(item) {
				if(this.$store.state.state&&this.$store.state.isphone){
					getApp().globalData.TTSSpeaker.stop();
					getApp().globalData.TTSSpeaker.speak(item.serviceItemName,1);
				}	
				let items = JSON.stringify(item)
				uni.navigateTo({
					url: '/pages/service/immediate/card?item=' + items
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.instant-item-inner-diy{
		width: 120rpx;
		height: 120rpx;
		align-items: center;
		display: flex;
		justify-content: center;
	}
	.tab-item{
			position: relative;
			.tab-right{
				position: absolute;
				right: 10rpx;
				top: -6rpx;
				width:20rpx;
				height:20rpx;
				border-radius:100%;
				background-color: red;
			}
		}
		.right-list-item-outer{
				flex:1;
				padding:20rpx;
		}
		.right-list-item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			height:100rpx;
			width: 100%;
			padding-left:30rpx;
			border-bottom: 1rpx solid #CCCCCC;
			.cuIcon-right{
				font-size:34rpx;
			}
			.center{
				width:32rpx;
				height: 32rpx;
				background-color: red;
				align-items: center;
				display: flex;
				justify-content: center;
				color: #FFF;
				font-size: 26rpx;
				border-radius: 100%;
			}
		}
		
		
		page{
			background-color: #FFFFFF;
		}
		.instant-item-inner{
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}
	.current-top{
		display: flex;
		padding:10px 30rpx;
		height:50px;
		.current-img{
			flex: 1;
			.current-img-inner{
				display: flex;
				align-items: center;
				padding-left:20rpx;
				width:260rpx;
				height:60rpx;
				background-color:#0057A8;
				border-radius:40rpx;
				image{
					width:40rpx;
					height:40rpx;
					margin-right: 10rpx;
				}
				.title{
					color: #FFFFFF;
				}
			}
		}
		.current-right{
			display: flex;
			align-items: center;
			.current-inner{
				border: 1rpx solid #0062CC;
				border-left: none;
				font-size: 28rpx;
				color: #666666;
				margin-left: -24rpx;
				padding-left: 18rpx;
				height:46rpx;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				padding-right:6rpx;
			}
			image{
				width: 70rpx;
				height: 70rpx;
			}
		}
	}
	.current-bot{
		display: flex;
		flex-wrap: wrap;
		.current-item{
			width:250rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-bottom:30rpx;
			margin-top:20rpx;
		}
	}
	.current-item-img{
		position: relative;
		image{
			width:100rpx;
			height:100rpx;
		}
		.current-item-position{
			width:36rpx;
			height:36rpx;
			font-size: 24rpx;
			color: #FFFFFF;
			background-color:red;
			border-radius:100%;
			display: flex;
			justify-content: center;
			align-items: center;
			position:absolute;
			right: -10rpx;
			top: -10rpx;
		}
	}
	.current-item-position-diy-img{
		position: relative;
		.current-item-position-diy{
			font-size: 24rpx;
			width:36rpx;
			height:36rpx;
			font-size: 24rpx;
			color: #FFFFFF;
			background-color:red;
			border-radius:100%;
			display: flex;
			justify-content: center;
			align-items: center;
			position:absolute;
			right: -24rpx;
			top: -10rpx;
		}
	}
	
	.tab-xian{
		padding:0 20rpx;
		.inner{
			height:1rpx;
			background-color: #999;
		}
	}
	.person_tp_tp{
		display: flex;
		width:100%;
		.person_left{
			flex: 3;
		}
		.person_right{
			width:32rpx;
			height:32rpx;
			background-color: red;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius:50%;
			font-size:26rpx;
		}
		
	}
	
	.tab{
			display: flex;
			padding: 10px 0;
			// padding: 20rpx 0;
			height: 40px;
			display: flex;
			align-items: center;
			background-color: #F2F2F2;
			.tab-item{
				
				flex:1;
				text-align: center;
				font-size: 32rpx;
			}
			.text-rig{
				border-right: 1rpx solid #AAAAAA;
			}
		}
		
		.page {
		}
		.absoult{
			position: relative;
			padding-right:30rpx;
			.inner{
				background-color: red;
				position: absolute;
				top: 8rpx;
				right:-2rpx;
				transform: translate(-50%,-50%);
				border-radius:50%;
				color: #FFFFFF;
				width:26rpx;
				height:26rpx;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	.text-line{
		border-right: 1rpx solid #AAAAAA;
	}
	
	.instant{
		margin-top:30rpx;
		display: flex;
		flex-wrap: wrap;
		.instant-item{
			margin-bottom: 10rpx;
			width: 250rpx;
			height:250rpx;
			color: #666666;
			image{
				width:120rpx;
				height:120rpx;
				margin-bottom:10rpx;
			}
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
	}
	.text-orange{
		color: #FAAD16;
		font-weight:700;
	}
	.scroll_inner{
			width:200rpx;
			height:100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.scroll{
			background-color: #F2F2F2;
			height: 100%;
			// height:auto;
		
		}
		.changeColor{
			background-color:#FFFFFF;
		}
		.scroll_rig{
			display: flex;
			flex-direction: column;
			flex: 1;
			padding: 0 20rpx;
			width: 100%;
			.person_img{
				image{
					width:120rpx;
					height: 120rpx;
				}
			}
			.person_rig{
				margin-left:20rpx;
				display: flex;
				flex:1;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #DDDDDD;
			}
			.person_bt{
				display: flex;
				align-items: center;
			}
			.person_tp{
				height: 100%;
				padding-bottom: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;
			}	
		}
		.person_icon{
			text{
				font-size:40rpx;
			}
		}
		.cu-tag{
			height: 36rpx;
			margin: 0 15rpx;
		}
		.scroll_rig_inner{
			padding: 20rpx 0;
			display: flex;
			height: 160rpx;
		}
			
		.instant-item-inner-diy{
			border-radius: 24rpx;
		}
		.scroll_instant{
		}
		.current-bot-inner{
			height:100%;
		}
		.current-bot{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
		}
		.current-item{
		}
		.scroll_rig_outer{
			height: 100%;
		}
</style>
